<template>
  <div>
    <div
      class="h-[142px] bg-[#fff] py-[24px] rounded-[4px] dark:bg-[var(--bg-2)] w-[100%]"
    >
      <div class="">
        <div
          class="px-[20px] mb-[20px]"
          :style="{
            fontSize: 'var(--font-size-2)',
            lineHeight: 'var(--font-size-2)'
          }"
        >
          数据概况(个)
        </div>
        <div class="flex justify-between px-[16px]">
          <div class="flex flex-1 justify-start h-[42px] overflow-hidden">
            <div>
              <img
                class="w-[42px] h-[42px]"
                src="@/assets/images/minpng/inspectioncount.png"
                alt=""
              />
            </div>
            <div class="flex flex-col justify-between ml-[10px]">
              <div
                class="text-[22px] leading-[22px] font-bold font-[D-DIN] fang"
              >
                <ReNormalCountTo :endVal="echartsdata?.baseInfo?.inspectTotal" :duration="Math.random() * 2000" />
              </div>
              <div
                :style="{
                  fontSize: 'var(--font-size-4)',
                  lineHeight: 'var(--font-size-4)'
                }"
              >
                累计巡检
              </div>
            </div>
          </div>
          <div class="flex flex-1 justify-start h-[42px] overflow-hidden">
            <div>
              <img
                class="w-[42px] h-[42px]"
                src="@/assets/images/minpng/inspectionwiting.png"
                alt=""
              />
            </div>
            <div class="flex flex-col justify-between ml-[10px]">
              <div class="text-[22px] leading-[22px] font-bold font-[D-DIN]">
                <ReNormalCountTo :endVal="echartsdata?.baseInfo?.inspectWait" :duration="Math.random() * 2000" />
              </div>
              <div
                :style="{
                  fontSize: 'var(--font-size-4)',
                  lineHeight: 'var(--font-size-4)'
                }"
              >
                待巡检
              </div>
            </div>
          </div>
          <div class="flex flex-1 justify-start h-[42px] overflow-hidden">
            <div>
              <img
                class="w-[42px] h-[42px]"
                src="@/assets/images/minpng/inspectionnomol.png"
                alt=""
              />
            </div>
            <div class="flex flex-col justify-between ml-[10px]">
              <div class="text-[22px] leading-[22px] font-bold font-[D-DIN]">
                <ReNormalCountTo :endVal="echartsdata?.baseInfo?.inspectNormal" :duration="Math.random() * 2000" />
              </div>
              <div
                :style="{
                  fontSize: 'var(--font-size-4)',
                  lineHeight: 'var(--font-size-4)'
                }"
              >
                巡检正常
              </div>
            </div>
          </div>
          <div class="flex flex-1 justify-start h-[42px] overflow-hidden">
            <div>
              <img
                class="w-[42px] h-[42px]"
                src="@/assets/images/minpng/inspectionerr.png"
                alt=""
              />
            </div>
            <div class="flex flex-col justify-between ml-[10px]">
              <div class="text-[22px] leading-[22px] font-bold font-[DIN]">
                <ReNormalCountTo :endVal="echartsdata?.baseInfo?.inspectErro" :duration="Math.random() * 2000" />
              </div>
              <div
                :style="{
                  fontSize: 'var(--font-size-4)',
                  lineHeight: 'var(--font-size-4)'
                }"
              >
                巡检异常
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-[248px] mt-[16px] gap-[16px] flex">
      <div
        class="w-[30%] pie-cardsa rounded-[4px] h-[248px] bg-[#fff] py-[24px] dark:bg-[var(--bg-2)] px-[16px]"
      >
        <div
          :style="{
            fontSize: 'var(--font-size-2)',
            lineHeight: 'var(--font-size-2)'
          }"
        >
          告警统计
        </div>
        <pieChart  :data="echartsdata.inspectResult"></pieChart>
      </div>
      <div
        class="w-[70%] rounded-[4px] h-[248px] bg-[#fff] py-[24px] dark:bg-[var(--bg-2)] px-[16px]"
      >
        <div
          :style="{
            fontSize: 'var(--font-size-2)',
            lineHeight: 'var(--font-size-2)'
          }"
        >
          近12个月告警状态统计
        </div>
        <Cross :data="echartsdata.inspectMonth"></Cross>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ReNormalCountTo } from '@/components/ReCountTo/index'
import pieChart from "./echarts/pic.vue";
import Cross from "./echarts/cross.vue";
const echartsdata = ref({
  baseInfo: {
    inspectTotal: 0,
    inspectWait: 0,
    inspectNormal: 0,
    inspectErro: 0
  },
  inspectResult: [], //巡检结果
  inspectMonth: [] //12个月数据
});
const arr1 = [
  { name: "正常", value: 1048 },
  { name: "异常", value: 400 },
  { name: "待处理", value: 500 }
];
import { missionstatistic } from "@/api/operate/daily-inspection/Inspection-statistics";
onMounted(() => {
  missionstatistic().then(res => {
    if (res.code == 200) {
      echartsdata.value = res.result;
    }
    // console.log(res,"巡检概况")
  });
});
</script>
<style scoped lang="scss"></style>
